<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body {
            padding: 10px;
            margin: 0;
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
        }
        nav {
            display: block;
            width: 150px;
            border: 1px solid red;
            position: fixed;
            right: 10px;
            bottom: 10px;
        }
        nav ul {
            padding-left: 20px;
        }
        .line {
            position: absolute;
            top: 8px;
            left: 5px;
            bottom: 8px;
            width: 2px;
            background-color: #ddd;
            z-index: 1;
        }
        .lineTop {
            position: absolute;
            left: 1px;
            top: 5px;
            z-index: 2;
            width: 10px;
            height: 10px;
            background-image: url(./img/5.png);
        }
        .lineBottom {
            position: absolute;
            left: 1px;
            bottom: 5px;
            z-index: 2;
            width: 10px;
            height: 10px;
            background-image: url(./img/5.png);
        }
        nav ul {
            list-style: none;
        }
        h2,h3 {
            border: 1px solid #ddd;
            height: 300px;
            margin: 0;
        }
        .blue {
            position: absolute;
            left: 1px;
            top: 20px;
            z-index: 3;
            width: 20px;
            height: 13px;
            background-image: url(./img/6.png);
            display: none;
        }
    </style>
</head>
<body>
    <h2>标题一</h2>
    <h3>标题一 1.1</h3>
    <h3>标题一 1.2</h3>
    <h3>标题一 1.3</h3>
    <h2>标题二</h2>
    <h3>标题二 2.1</h3>
    <h3>标题二 2.2</h3>
    <h3>标题二 2.3</h3>
    <h2>标题三</h2>
    <h2>标题四</h2>
    <h2>标题五</h2>
    <h2>标题六</h2>



    <nav>
        <ul>
            <li class="par">标题一</li>
            <li>
                <ul>
                    <li class="chi">标题一 1.1</li>
                    <li class="chi">标题一 1.2</li>
                    <li class="chi">标题一 1.3</li>
                </ul>
            </li>
            <li class="par">标题二</li>
            <li>
                <ul>
                    <li class="chi">标题二 2.1</li>
                    <li class="chi">标题二 2.2</li>
                    <li class="chi">标题二 2.3</li>
                </ul>
            </li>
            <li class="par">标题三</li>
            <li class="par">标题四</li>
            <li class="par">标题五</li>
            <li class="par">标题六</li>
        </ul>
        <span class="lineTop"></span>
        <span class="line"></span>
        <span class="lineBottom"></span>
        <!--蓝色块-->
        <span class="blue"></span>
    </nav>



<script src="jquery-3.2.1.min.js"></script>
<script src="nav.js"></script>
</body>
</html>